<template>
  <div class="content">
    <header>
      <ul><li @click="$router.push('/login_info')" class="grey"><img class="back-icon" src="~assets/img/icon_l@2x.png" alt=""> 返回</li><li style="box-sizing:border-box"><h2 style="font-size:16px">{{$parent.title}}</h2></li><li></li></ul>
  </header>
      <div class="progress"><img src="~assets/img/icon_jd_2@2x.png" alt=""></div>
      <div class="pay_top">
        <div class="pay_borders"><strong>用户信息</strong></div>
        <div class="top_center">
          <p><span class="tel_left">手机号: <time>{{mobile}}</time></span><span class="tel_right">姓名: <time>{{account_info.name}}</time></span></p>
          <p><span class="tel_left">等级: &nbsp;<time>{{level | garde_name }}</time></span><span class="tel_right">推荐人: <time>{{account_info.p_uid}}</time></span></p>
        </div>
      </div>
      <div class="pay_center">
        <div class="pay_borders"><img src='~assets/img/pay_info.png' style="width:24px;height:24px;margin-bottom:4px" alt="" class="list-icon"> <strong style="margin-left:3px">支付信息</strong></div>
        <div class="center_center">
          <ul>
            <li><img style="width:100px;margin-top:-6px;height:auto" :src="img_src" alt=""></li>
            <li><p><span class="tel_left">名称:  <time>{{level | garde_name}}</time></span><span style="margin-left:40px" class="tel_right">数量:  <time>1</time></span></p>
                <span>金额：&nbsp; <time class="money">￥{{level | garde_money}}</time></span>
            </li>
          </ul>
        </div>
      </div>
      <div class="pay_bottom">
        <div class="pay_borders"><img src='~assets/img/pay_may.png' style="width:24px;height:24px;margin-bottom:4px" alt="" class="list-icon"> <strong style="margin-left:3px">支付方式</strong></div>
        <div class="bottom_center">
          <mt-radio
            align="right"
            v-model="pay_type"
            :options="['微信', '支付宝', '线下支付']">
          </mt-radio>
        </div>
      </div>
      <div class="tc"><button style="opacity:1" @click="payment()" class="common-btn">立即支付￥{{level | garde_money}}.00</button></div>
  </div>
</template>

<script>
import { MessageBox } from 'mint-ui'
export default {
  data () {
    return {
      pay_type: '微信',
      mobile: '',
      level: '',
      pay_name: '',
      img_src: '',
      options: [],
      account_info: {},
      imgs: [
        {'level_img': require('./../../../assets/img/img_card_1@2x.png')},
        {'level_img': require('./../../../assets/img/img_card_2@2x.png')},
        {'level_img': require('./../../../assets/img/img_card_3@2x.png')},
        {'level_img': require('./../../../assets/img/img_card_4@2x.png')}
      ]
    }
  },
  mounted () {
    this.$apiPost('userinfo',{}).then((data) => {
      if (data.status === 0) {
        this.account_info = data.data.account_info
        this.level = data.data.account_info.level
        this.img_src = this.imgs[this.level-1].level_img
        this.mobile = data.data.account_info.phone
      } else {
      }
    })
    this.$apiPost('userstatus',{}).then((data) => {
      if (data.status === 0) {
         if (data.data.recode === 1005) {
            this.$router.push('/user')
          }
      } else {
        MessageBox({title: '提示',message: data.msg})
      }
    })
  },
  filters: {
    garde_name (str) {
      if (str === 1) {
        return '银卡'
      } else if (str ===2 ) {
        return '金卡'
      } else if (str ===3 ) {
        return '钻石'
      } else if (str ===4 ) {
        return 'VIP'
      }
    },
    garde_money (str) {
      if (str === 1) {
        return '1500'
      } else if (str ===2 ) {
        return '3000'
      } else if (str ===3 ) {
        return '6000'
      } else if (str ===4 ) {
        return '12000'
      }
    }
  },
  methods: {
    payment () {
      var type = ''
      if (this.pay_type === '支付宝') {
        type = '1'
      } else if (this.pay_type === '微信') {
        type = '2'
      } else if (this.pay_type === '线下支付') {
        type = '3'
      }
      if (type === '3') {
         this.$router.push('/submit_info')
      } else {
        MessageBox({title: '提示', message: '线上支付功能暂未开放，请采用线下支付方式'})
      }
  }
}
}
</script>
<style scoped lang='scss'>
.pay_borders{
  width: 100%;
  height: 40px;
  background: #fff;
  border-bottom: 1px solid #E5E5E5;
  font-size: 16px;
  line-height: 40px;
}
.pay_range{
  width: 100%;
  height: 54px;
  background: #fff;
  margin-top:10px;
  padding: 16px 16px 0 16px;
}
.pay_top,.pay_center,.pay_bottom{
  width: 100%;
  height: 106px;
  background: #fff;
  margin-top:10px;
  padding: 0 16px 0 16px;
}
.top_center{
  padding: 13px 20px 10px 16px;
  p{
    line-height: 20px;
    overflow: auto;
    .tel_left{
      float: left;
      font-size: 12px;
      color: #333333;
      time{
        font-size: 14px;
      }
    }
    .tel_right{
      float: right;
      font-size: 12px;
      color: #333333;
      time{
        font-size: 14px;
      }
    }
  }
}
.pay_bottom{
  height: 202px;
  .mint-cell-left{
    display: none
  }
}
.center_center{
  ul{
    width: 100%;
    height: 100%;
    display: flex;
    li{
      flex: 1;
      padding: 10px 12px 10px 12px;
      .tel_right{
        margin-left:20px;
      }
      span{
        line-height: 24px;
        font-size: 12px;
        time{
          font-size: 14px;
          font-weight: 600
        }
        .money{
            color: #ff3366
            }
          }
    }
  }
}
</style>
